<template>
  <div class="info">
    <div class="img-box">
      <div>
        <img
          v-if="info.img1"
          :src="require('../../../assets/img/industry/' + info.img1)"
          alt=""
        />
      </div>
      <div>
        <img
          v-if="info.img2"
          :src="require('../../../assets/img/industry/' + info.img2)"
          alt=""
        />
      </div>
    </div>
    <div class="detail">
      <div class="title">
        <span>{{ info.name }}</span>
      </div>
      <div class="text-box scroll" v-html="info.span" ref="details">
        <!-- <p>
          现代物流业是指原材料、产成品从起点至终点及相关信息有效流动的全过程。它将运输、仓储、装卸、加工、整理、配送、信息等方面有机结合、形成完整的供应链，为用户提供多功能、一体化的综合性服务。现代物流业是一个新型的跨行业、跨部门、跨区域、渗透性强的复合型产业。2020年，全国社会物流总额
          300.1
          万亿元，同比增长3.5%。现代物流主要包括八个环节，上游包括物流装备，中游包括货物运输、多式联运及货运代理、装卸搬运及仓储等六个环节，下游为商贸交易。
        </p>
        <p>
          太原市物流业规模较大，业态集中度较高。公路运输、大宗工业品物流贸易稳步发展，驼队物流、钢运物流、畅捷物流完成早期物流场站布局；铁路物流蓬勃起兴，大秦铁路、中铁物资、中鼎物流园逐步形成立体式、协同型铁路运输服务网络；汽贸物流、冷链物流、医药物流、电商物流等物流新业态加速涌现。截至2020
          年 12 月，太原市物流业重点企业 304 家。其中，五百强企业
          1家，高新技术企业 8 家，科技型中小企业 19 家，专精特新企业
          5家，规模以上工业企业 3 家，拥有专利及软件著作权企业 5家。
        </p>
        <p>
          现代物流产业链企业主要集中在物流装备、货物运输、装卸搬运及仓储、邮政快递服务、综合物流服务等环节。太原市现代物流产业应紧抓全省陆港发展新机遇，充分利用铁路路网能力，加快铁路物流枢纽建设，布局商贸物流、冷链物流、工业物流、电商物流、保税物流、医药物流等综合物流服务，并推动钢贸交易、煤炭交易等下游业态联动发展。中游重点发展铁路货运、多式联运及货运代理、邮政快递服务、综合物流服务；下游重点发展商贸交易。
        </p> -->
      </div>
    </div>
  </div>
</template>
<script>
import industryArr from "../../../utils/industry.json";
export default {
  data() {
    return {
      info: {},
    };
  },
  props: ["industry_id"],
  watch: {
    industry_id(nv, ov) {
      industryArr.forEach((item) => {
        if (item.id == nv) {
          this.info = item;
        }
      });
      this.$refs.details.scrollTop = "0px";
    },
  },
  mounted() {
    industryArr.forEach((item) => {
      if (item.id == this.industry_id) {
        this.info = item;
      }
    });
  },
  methods: {},
};
</script>
<style lang="less" scoped>
.info {
  display: flex;
  height: 100%;
  justify-content: space-between;
}
.img-box {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  div {
    flex: 0 0 49%;
  }
  img {
    width: 98%;
    height: 100%;
    box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.1);
    border-radius: 10px;
  }
}
.detail {
  box-sizing: border-box;
  padding: 10px 30px 50px;
  width: 840px;
  height: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.1);
  border-radius: 10px;
}
.title {
  position: relative;
  height: 56px;
  line-height: 56px;
  span {
    position: relative;
    display: inline-block;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #446db3;
    border-bottom: 1px solid #446db3;
    z-index: 9;
  }
}
.title::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #cccccc;
}

.text-box {
  height: calc(100% - 60px);
  padding: 0px 16px 0 0;
  margin-top: 30px;
  text-indent: 2em;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  line-height: 36px;
}
.scroll {
  overflow-y: auto;
  scrollbar-color: #767ffe #e9f3ff; //滚动条轨道颜色   滚动条滑块的颜色
  scrollbar-width: 6px;
  scrollbar-width: thin; //thin模式下滚动条两端的三角按钮会消失

  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 70px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 6px;
    background: linear-gradient(0deg, #767ffe, #79aefe);
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    background: #e9f3ff;
    border-radius: 6px;
  }
}
/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
    .detail {
    width: 660px;
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
}
</style>
